<script setup>
import { ref } from 'vue';

defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  maxHeight: {
    type: String,
    default: '',
  },
});

const active = ref('');

const clickItem = (data) => {
  active.value = data.code;
};
</script>

<template>
  <div class="cascader" :style="{ 'max-height': maxHeight }">
    <div class="cascader-menu">
      <div
        v-for="item in options"
        :key="item.code"
        class="list-item"
        :class="{ active: active === item.code }"
        @click="clickItem(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="cascader-menu">
      <div
        v-for="item in options"
        :key="item.code"
        class="list-item"
        :class="{ active: active === item.code }"
        @click="clickItem(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.list {
  color: #191919;
  overflow-y: auto;

  .list-item {
    height: 0.3rem;
    line-height: 0.3rem;

    &.active {
      color: blue;
    }
  }
}
</style>
